//样式重置
@import "reset";
//pc端滚动条美化
@import "scroll";
//原子类
@import "commons";
html{
font-size: 100./7.5vw;
}
@fontSize:100rem;
html,body{
  height: 100%;
}
body{
  font-size:0.28rem;
  font-family: '微软雅黑';
  width: 100%;
}
.container{
  display: flex;
  flex-direction: column;
  width: 7.5rem;
  height: 100%;
  margin: 0 auto;
  background-color: #f6f6f6;

  .top{
    width:100%;
    height: 0.88rem;
    background-color: #eee;
    .top-in{
      width: 7.1rem;
      height: 0.88rem;
      line-height: 0.88rem;
      margin: 0 auto;
      .img1{
        width: 0.32rem;
        height: 0.32rem;
        >img{
          width: 100%;
          height: 100%;
        }
      }
      >h2{
        font-size:0.36rem;
        margin-left: 0.09rem;
      }
      .img2{
        width: 0.4rem;
        height: 0.1rem;
        >img{
          width: 100%;
          height: 100%;
        }
      }
    }


  }

  .content{
    flex:1;
    overflow-x: hidden;
    overflow-y: auto;
    .content-in{
      height: 100%;
      width: 7.1rem;
      margin: 0 auto;

      .choicestraveler{
        width: 100%;
        //height: 0.82rem;
        background-color: white;
        line-height: 0.82rem;
        margin-top: 0.23rem;
        border-radius: 0.05rem;

        >a{

          &:hover{
            color:initial;
          }
          >img{
            width: 0.29rem;
            height: 0.32rem;
            margin:0.23rem 0.16rem  0.27rem 0.25rem;
          }

          >span{
            font-size: 0.26rem;
            &.cxr{
              color:#989898;
            }
          }
          span.fr{
            color: #8B8B8B;
            margin-right: 0.19rem;
          }
        }
        >p.lxr{
          >span{
            font-size: 0.26rem;
            &:nth-child(2){
              color:#989898;
            }
          }
          margin-left: 0.7rem;
          line-height: 0.5rem;
        }
        >p.zhuyi{
          margin-left: 0.7rem;
          color: #f84443;
          font-size: 0.24rem;
          line-height: 0.5rem;
          margin-bottom: 0.15rem;
        }

      }

      .order{

        margin-top: 0.19rem;
        background-color: white;
        width: 100%;
        border-radius: 0.05rem;
        .title{
          height: 0.78rem;
          line-height: 0.78rem;
          border-bottom: 0.01rem solid #EBEBEB;
          >img{
            width: 0.31rem;
            height: 0.27rem;
            margin-left: 0.24rem;
          }
          >span{
            margin-left: 0.15rem;
            font-size: 0.26rem;
          }
        }

        .goods-top{

          display: flex;
          width: 6.71rem;
          margin: 0.3rem auto;
          padding-bottom: 0.3rem;
          border-bottom: 1px solid #EBEBEB;
          >img.left{
            width: 1.31rem;
            height: 1.3rem;
          }
          div.right{
            margin-left: 0.13rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            >h4{

              font-size: 0.3rem;
              color: #282828;
            }
            >p{
              margin-left: 0.1rem;
              &.date{
                font-size: 0.24rem;
                color: #989898;
              }
              &.price{
                span.fl{
                  font-size: 0.24rem;
                }
              }
            }

          }
        }

        .goods-bottom{
          width: 6.71rem;
          margin: 0 auto;
          font-size: 0.26rem;
          line-height: 0.72rem;
          form{
            div.numb{
              position: relative;
              >button,>input{
                text-align: center;
                border: 0px;
                outline:none;
                background-color: #f4f4f4;
                height: 0.4rem;
                font-size: 0.24rem;
              }
              .add,.jian{
                width: 0.4rem;
              }

              #num{
                width: 0.71rem;
              }

            }

            #remarks{
              font-size: 0.24rem;
              margin-left: 0.44rem;
              width: 5rem;
              outline: none;
              border: none;
            }
          }
          >p{
            margin-top: 0.9rem;
            margin-bottom: 0.3rem;
            color: #989898;
            font-size: 0.24rem;
            span{
              font-size: 0.2rem;
              color: #F84443;

              &.xiaoji{
                color: #282828;
              }
              &.money{
                font-size: 0.28rem;
              }
            }
          }
        }
      }

    }


  }

  .foot{
    width: 100%;
    height: 1.11rem;
    background-color: white;
    box-shadow: -0.02rem -0.02rem 0.02rem 0.05rem rgba(230,230,230,0.3);
    .foot-in{
      width: 7.1rem;
      height: 1.11rem;
      margin: 0 auto;
      line-height: 1.11rem;
      >p{
        //margin-top: 0.25rem;
        margin-right: 0.2rem;
        color: #989898;
        font-size: 0.24rem;
        span{
          font-size: 0.2rem;
          color: #F84443;

          &.xiaoji{
            color: #282828;
          }
          &.money{
            font-size: 0.3rem;
          }
        }
        >a{
          display: inline-block;
          margin-left: 0.26rem;
          background-color: #F84443;
          height: 0.64rem;
          width: 2.04rem;
          color: white;
          text-align: center;
          border-radius: 0.32rem;
          line-height:0.64rem ;
        }
      }


    }
  }

}